<template>
  <div class="bottom-nav">
    <div class="nav-item">
      <i class="fas fa-home"></i>
      <span>首页</span>
    </div>
    <div class="nav-item">
      <i class="fas fa-shopping-cart"></i>
      <span>购物车</span>
    </div>
    <div class="nav-item">
      <i class="fas fa-user"></i>
      <span>我的</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BottomNavigation' 
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 375px;
  display: flex;
  justify-content: space-around;
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.nav-item {
  text-align: center;
}
.nav-item i {
  font-size: 24px;
}
.nav-item span {
  display: block;
  font-size: 12px;
}
</style><template>
  <div class="bottom-nav">
    <div class="nav-item">
      <i class="fas fa-home"></i>
      <span>首页</span>
    </div>
    <div class="nav-item">
      <i class="fas fa-user-md"></i>
      <span>问诊</span>
    </div>
    <div class="nav-item">
      <i class="fas fa-prescription-bottle"></i>
      <span>药方</span>
    </div>
    <div class="nav-item">
      <i class="fas fa-shopping-cart"></i>
      <span>购物车</span>
    </div>
    <div class="nav-item active">
      <i class="fas fa-user"></i>
      <span>我的</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BottomNavigation'
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 375px;
  display: flex;
  justify-content: space-around;
  background: #FFF;
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.nav-item {
  text-align: center;
  color: #999;
}
.nav-item.active {
  color: #4CAF50;
}
.nav-item i {
  font-size: 24px;
}
.nav-item span {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
</style>